<route lang="jsonc" type="page">
    {
      "layout": "tabbar",
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "保养"
		}
    }
</route>

<script lang="ts" setup>
	import ProductList from './components/product-list.vue'
	import { useSafeAreaInsets } from '@/mixins/basic'
	defineOptions({
	  name: 'Maintenance',
	})
	
	const { safeAreaInsets } = useSafeAreaInsets()
</script>

<template>
  <view class="maintenance-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
	  <view class="page-title">
	  	<view class="title">雪具养护</view>
	  	<view class="sub-title">MAINTAIN</view>
	  </view>
	  
	  <!-- 商品列表 -->
	  <product-list recommend="1"></product-list>
  </view>
</template>

<style lang="scss" scoped>
	.maintenance-page {
		padding: 0 26px 30px 26px;
		background-color: #FCFEFF;
		.page-title {
			color: $uni-main-color;
			padding-bottom: 18px;
			font-weight: 600;
			.title {
				font-size: 36px;
				line-height: 43px;
				font-family: Source Han Sans CN;
			}
			.sub-title {
				font-size: 14px;
				line-height: 17px;
				letter-spacing: 10px;
				font-family: Source Han Sans CN;
			}
		}
	}
</style>
